<template>
	<div>
		 <!-- 顶部导航 -->
    <!-- <div class="top_tab">
      <span>会议纪要详情</span>
    </div> -->
     <!-- 空DIV -->
    <!-- <div class="hight-r"></div> -->
		<div class="center">
			<div class="title">
				<span>{{SummaryDetails.theme}}</span> 
			</div>
			<div class="infos">
				<span class="time">{{(SummaryDetails.create_time) | time}}</span>
			</div>
			<p>
				{{SummaryDetails.summary}} 
			</p>
			<div class="pic">
				<div v-for="(item,index) in SummaryDetails.picture" :key="index" class="gf">
					<img :src="item.picture" alt  onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
				</div>
			</div>
		</div>
		<div class="fj">
			<div class="box">
				<span class="title">会议文件</span>
				<div class="bar" v-for="(item,index) in SummaryDetails.accessory" :key="index">
					<img src="@as/img/dangwu_wode_fj@2x.png" alt="">
					<div class="fjbox">
						<a :href="item.accessoryPath">{{item.accessoryName}}</a>
					</div>
				</div>
				<p class="nomor" v-if="SummaryDetails.accessory==undefined">暂无会议文件</p>
			</div>
		</div>
		<div class="md">
			<div class="title">
				<span class="txt">与会人员</span>
				<div class="zk" v-if="party_list.length!=0" @click="setActive(index)">
					<span>{{state}}</span>
					<img src="@as/img/hongdong_dt_xia@2x.png" alt="" :class="index == 0?'ImgAscive':'ImgUnAscive'">
				</div>
			</div>
			<div class="name" v-if="index==0">
				<span class="w">
					<span v-for="(item,index) in party_list" :key="index">
						{{item}}、
					</span>
				</span>
			</div>
			<div class="names" v-if="index==1">
				<span class="w">
					<span v-for="(item,index) in party_list" :key="index">
						{{item}}、
					</span>
				</span>
			</div>
			<p class="nomor" v-if="party_list.length==0">暂无与会人员</p>
		</div>
		<div class="albumScan">
			<div class="swiper-container" id="swiper-img">
				<div class="swiper-wrapper"></div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
			data() {
				return {
					state:'展开',
					index:0,
					party_list:[
					
					],
					eid:'',
					SummaryDetails:{},
				}
			},
			mounted() {

			},
			methods: {
				setActive: function(index) {
					if(this.index==0){
						this.index = 1
						this.state ='收起'
					}else{
						this.index = 0
						this.state ='展开'
					}
				},
				async getSummaryDetails () { 
					let that = this;
					try {
						let params = {
							meeting_id:that.eid
						}
						const url = `/app/meeting/minutes_info`
						let res = await that.$http.get(url, params)
						that.$progress.done();
						if (res.code === 200) {
							that.SummaryDetails = res.data
							that.party_list = res.data.party_name;
							this.$nextTick(function () {
                                var length =$('.pic .gf').length;
                                console.log(length)
                                var arr=[];
                                var str ='';
                                $('.pic .gf img').each(function (index,item) {
                                    console.log(index,item)
                                    str ='<div class="swiper-slide"><img data-src="'+item.src+'" class="swiper-lazy" style="max-width: 100%;width:300px;display:block;margin: 0 auto;overflow: hidden"><div class="swiper-lazy-preloader"></div></div>'
                                    $('.swiper-wrapper').append(str)
                                    $(this).click(function () {
                                        var index =$(this).parent().index();
                                        $('.albumScan').show()
                                        var swiper =new that.Swiper('#swiper-img',{
                                            autoplay:false,
                                            pagination: {
                                                el: '.swiper-pagination',
                                            },
                                            lazy: {
                                                loadPrevNext: true,
                                            },
                                            on:{
                                                slideChangeTransitionEnd: function () { // pagination BUG
                                                    var activeIndex = this.activeIndex;
                                                    $('.swiper-pagination')
                                                        .find('span')
                                                        .eq(activeIndex)
                                                        .addClass('swiper-pagination-bullet-active')
                                                        .siblings()
                                                        .removeClass('swiper-pagination-bullet-active');
                                                }
                                            }
                                        })
                                        swiper.slideTo(index,0,false)
                                        $('.albumScan').click(function () {
                                            $(this).hide()
                                            $('.swiper-notification').remove()
                                        })

                                    })
                                })
                            })

						}



					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
			},
			created(){
				this.eid = this.$route.query.id;
				this.getSummaryDetails()
			}
	}
</script>

<style scoped lang="scss">
/* 顶部tab */
.top_tab {
  width:100%;
	height:50px;
  padding:0 15px;
  background: #FFF;
  display: flex;
	position: fixed;
  justify-content: center;
  align-items: center;
	z-index: 20;
	span {
		color: #333;
		font-size: 18px;
		font-weight: bold;
	}
}
/* 顶部空 */
.hight-r {
  height: 50px;
}
.center{
	width:100%;
	padding: 0 15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.title{
		width:100%;
		margin-top: 15px;
		span{
			font-size: 18px;
			color: #333;
			display: inline-block;
			line-height: 1.5;
			font-weight: bold;
		}
	}
	.infos{
		width:100%;
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
		margin-bottom: 5px;
		.zz{
			font-size: 12px;
			color: #ec5345;
		}
		.time{
			font-size: 12px;
			color: #999;
		}
	}
	p{
		font-size: 14px;
		color: #666;
		text-indent: 2em;
		line-height: 1.8;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.pic{
		width:100%;
		display: flex;
		flex-wrap: wrap;
		.gf{
			width:31%;
			height:71.5px;
			overflow: hidden;
			margin-right: 12px;
			margin-bottom: 8px;
			
			img{
				width:100%;
				height:100%;
				border-radius: 5px;
			}
		}
	}
}
.gf:nth-child(3n){
	margin-right: 0 !important;
}
.fj{
	width:100%;
	padding: 15px 15px 0 15px;
	box-sizing: border-box;
	.box{
		width:100%;
		padding: 20px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.title{
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}
		.bar{
			width:100%;
			display: flex;
			align-items: center;
			// margin-top: 10px;
			img{
				width:17px;  
				height:16.5px; 
			}
			.fjbox{
				width:95%;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				padding: 0 0 0 5px;
				a{
					text-decoration:none; 
					font-size: 14px;
					color: #666 !important;
					display: inline-block;
					line-height: 1.2;
					overflow: hidden;
					margin: 0;
					padding: 0;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
		}
		.nomor{
			font-size: 14px;
			color:#666;
			margin-top: 10px;
		}
	}
}
.md{
	width:100%;
	padding: 15px 15px;
	.title{
		width:100%;
		display: flex;
		justify-content: space-between;
		.txt{
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}
		.zk{
			display: flex;
			align-items: center;
			span{
				font-size: 12px;
				color: #999;
			}
			img{
				width:10px;
				height:8.5px;
				margin-left: 3px;
			}
		}
	}
	.name{
			width:100%;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			.w{
				margin-top: 10px;
			}
			span{
				font-size: 12px;
				color: #666;
				line-height: 2;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}
	.names{
		width:100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.w{
			margin-top: 10px;
		}
		span{
			font-size: 12px;
			color: #666;
			line-height: 2;
		}
	}
	.nomor{
		font-size: 14px;
		color:#666;
	}
}
/* 180°旋转图片。 */
.ImgAscive{
	transform: rotate(180deg); 
	transition: All 0.4s ease; 
	-webkit-transition: All 0.4s ease;
}

.ImgUnAscive{
	transform: rotate(360deg); 
	transition: All 0.4s ease; 
	-webkit-transition: All 0.4s ease; 
}

.albumScan{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: rgb(0,0,0);
	z-index: 989999;
	display: none;
	.swiper-container{
		height: 200px;
		width: 100%;
		position: absolute;
		left:0;
		top:0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	.swiper-container .swiper-slide img{
		display: block;
		margin: 0 auto;
		max-width: 100%;
		background: red;
	}
	.swiper-container .swiper-slide .swiper-lazy{
		width: 100%;
	}
	.swiper-pagination-bullet-active{
		opacity: 1;
		background: #e83329;
	}
}

</style>